<route lang="json5" type="voyageDetail">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '航次详情',
  },
}
</route>
<template>
  <view class="voyage_detail_container">
    <view class="title_box">
      <img src="../../static/images/ic_voyage_tab_back.png" />
      <text>{{ t('home.homeBoatTask') }}</text>
    </view>
    <view class="top_box">
      <img src="../../static/images/freighter.png" />
      <view class="msg_box">
        <text>IKEBANA 38SF</text>
        <text>
          {{ t('service.expected') }}2024-09-22 06:00:00{{ t('service.address') }}Qingdao Pt
        </text>
        <text>卸 - 纸浆 - 4152MTS</text>
      </view>
      <view>
        <text>{{ t('voyage.details') }}</text>
      </view>
    </view>
    <view class="enclosure_box pd-l-30 pd-r-30">
      <text>{{ t('voyage.enclosure') }}</text>
      <text>3{{ t('voyage.individual') }}</text>
    </view>
    <view class="input_items_box">
      <view class="title_item_box pd-l-30 pd-r-30">
        <text>{{ t('voyage.infoTitleinputOptions') }}</text>
      </view>
      <view class="ipt_items_msg">
        <view class="item">
          <img src="../../static/images/arrival.png" />
          <text>{{ t('voyage.infoArrival') }}</text>
          <text class="required">*</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
        <view class="item">
          <img src="../../static/images/anchor.png" />
          <text>{{ t('voyage.infoDroppedAnchor') }}</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
        <view class="item">
          <img src="../../static/images/berthing.png" />
          <text>{{ t('voyage.infoBerthed') }}</text>
          <text class="required">*</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
        <view class="item">
          <img src="../../static/images/quarantine.png" />
          <text>{{ t('voyage.infoQuarantine') }}</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
        <view class="item">
          <img src="../../static/images/joint_inspection.png" />
          <text>{{ t('voyage.infoJointInspectionFormality') }}</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
        <view class="item">
          <img src="../../static/images/inspection.png" />
          <text>{{ t('voyage.infoDraftSurvey') }}</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
        <view class="item">
          <img src="../../static/images/handling.png" />
          <text>{{ t('voyage.infoLoadingDischarging') }}</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
        <view class="item">
          <img src="../../static/images/shift.png" />
          <text>{{ t('voyage.infoShifting') }}</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
        <view class="item">
          <img src="../../static/images/ship_depart.png" />
          <text>{{ t('voyage.infoDepartured') }}</text>
          <text class="required">*</text>
          <view>{{ t('voyage.fillIn') }}</view>
        </view>
      </view>
    </view>
    <view class="sof_box">
      <view class="title_item_box pd-l-30 pd-r-30">
        <text>{{ t('voyage.infoTitleSOF') }}</text>
      </view>
      <view class="content">
        <text>{{ t('voyage.createSOF') }}</text>
      </view>
    </view>
    <view class="single_ship_box">
      <view class="title_item_box pd-l-30 pd-r-30">
        <text>{{ t('voyage.infoTitleWorksheet') }}</text>
      </view>
      <view class="content">
        <text>{{ t('voyage.createWorksheet') }}</text>
      </view>
    </view>
    <view class="finish_btn">{{ t('voyage.confirmCompletion') }}</view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineOptions({
  name: 'Notice',
})
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
const value = ref('')
function handleChange(event) {
  console.log(event)
}
// 当前所在tab值
const currentTab = ref('预抵港')
// 点击tab栏触发事件
const tabClick = (val) => {
  currentTab.value = val
}
const dataList = reactive([
  {
    voyage: 'EVA USUKI 2405/',
    date: '2024-10-21 00:00:00',
    arrival: 'Nantong',
    num1: '10000TEU',
    num2: '11000TEU',
    status: '预抵港',
  },
  {
    voyage: 'EVA USUKI 2405/',
    date: '2024-10-21 00:00:00',
    arrival: 'Nantong',
    num1: '10000TEU',
    num2: '11000TEU',
    status: '预抵港',
  },
])
</script>
<style lang="scss" scoped>
.pd-l-30 {
  padding-left: 30rpx !important;
}
.pd-r-30 {
  padding-right: 30rpx !important;
}
.voyage_detail_container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f8f9fb;
  .title_item_box {
    padding: 16rpx 0;
    border-bottom: 2rpx solid #ededed;
  }
  .title_box {
    position: relative;
    width: 100vw;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #295699;
    border: none;

    img {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 26rpx;
      transform: translateY(-50%);
    }
    text {
      color: #fff;
    }
  }
  .top_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx 26rpx 140rpx;
    font-size: 22rpx;
    color: #fff;
    background-color: #295699;
    border: none;
    img {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 80rpx;
      margin-right: 20rpx;
      transform: translateY(-50%);
    }
    .msg_box {
      display: flex;
      flex-direction: column;
      font-size: 20rpx;
      color: #6689c0;
      text {
        margin-bottom: 4rpx;
        &:nth-child(1) {
          font-size: 26rpx;
          color: #fff;
        }
      }
    }
  }
  .enclosure_box {
    display: flex;
    justify-content: space-between;
    padding: 16rpx 0;
    margin-top: 16rpx;
    background-color: #fff;
    text {
      font-size: 24rpx;
      color: #5b5b5b;
      &:nth-child(2) {
        color: #7a7a7a;
      }
    }
  }
  .input_items_box,
  .sof_box,
  .single_ship_box {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #365b85;
    background-color: #fff;
  }
  .input_items_box {
    .ipt_items_msg {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100vw;
      padding: 30rpx;

      .item {
        position: relative;
        box-sizing: border-box;
        width: 30%;
        padding: 10rpx;
        padding-left: 50rpx;
        margin-bottom: 30rpx;
        border: 2rpx solid #405b7f;
        border-radius: 10rpx;
        &:nth-last-child(1),
        &:nth-last-child(2),
        &:nth-last-child(3) {
          margin-bottom: 0;
        }
        img {
          position: absolute;
          top: 10rpx;
          left: 10rpx;
          width: 30rpx;
        }
        .required {
          margin-left: 4rpx;
          color: red;
        }
        view {
          &:nth-last-child(1) {
            margin-top: 8rpx;
            font-size: 20rpx;
            color: #595b5a;
          }
        }
      }
    }
  }
  .sof_box,
  .single_ship_box {
    .content {
      padding: 46rpx 30rpx;
      text {
        padding: 16rpx 30rpx;
        font-size: 22rpx;
        color: #fff;
        background-color: #3b7fe2;
        border-radius: 10rpx;
      }
    }
  }
  .finish_btn {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    width: 85%;
    padding: 16rpx 0;
    font-size: 24rpx;
    color: #fff;
    text-align: center;
    background-color: #3b7fe2;
    border-radius: 10rpx;
    transform: translateX(-50%);
  }
}
</style>
